import {
    getComponentByTab,
    getFilteredItems,
} from "@/pages/Common/CommonData";
import { Button, Empty, Flex, Tabs } from "antd";
import { useLoaderData, useNavigate } from "react-router";

export default function PageTemplate({ pageType }) {
  const { tab, initData } = useLoaderData();
  const navigate = useNavigate();

  const filteredItems = getFilteredItems(pageType);

  const isEmpty = pageType === "subscribe" && filteredItems.length === 0;

  const goToSubscribe = () => {
    navigate("/user/home");
  }


  return (
    <Flex
      vertical={true}
      style={{ width: "50rem" }}
      gap={"0.5rem"}
    >
      <Tabs
        style={{
          backgroundColor: "white",
          borderRadius: "0.3rem",
          padding: "0 12px",
          boxShadow:
            "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px",
        }}
        tabBarStyle={{ margin: 0 }}
        activeKey={tab}
        defaultActiveKey={filteredItems[0]?.key || ""}
        items={filteredItems}
        onChange={(key) => navigate(`/${pageType}?tab=${key}`)}
      />
      {isEmpty ? (
        <Flex
          vertical
          gap={12}
          style={{
            width: "100%",
            height: "800px",
            backgroundColor: "white",
            justifyContent: "center",
            alignItems: "center",
            borderRadius: "0.2rem",
          }}
        >
          <Empty description="暂无订阅项" />
          <Button onClick={goToSubscribe}>前往订阅</Button>
        </Flex>
      ) : (
        getComponentByTab(tab, initData)
      )}
    </Flex>
  );
}
